<template>
  <NavBar />
  <div>
  <van-form @submit="dataFormSubmitHandle">
    <van-cell-group inset>
      <van-field name="uploader" label="头像">
        <template #input>
          <van-image
            width="100"
            height="100"
            :src="dataForm.avatar"
          />
        </template>
      </van-field>

      <van-field
        v-model="dataForm.username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />

<!--      <van-field
        v-model="dataForm.idCard"
        name="身份证号"
        label="身份证号"
        placeholder="请输入身份证号"
        :rules="[{ required: true, message: '身份证号' }]"
      /> -->

      <van-field
        v-model="dataForm.nickname"
        name="昵称"
        label="昵称"
        placeholder="请输入昵称"
        :rules="[{ required: true, message: '请输入昵称' }]"
      />

      <van-field name="性别" label="性别">
        <template #input>
          <van-radio-group v-model="dataForm.gender" direction="horizontal">
            <van-radio name="0">女</van-radio>
            <van-radio name="1">男</van-radio>
          </van-radio-group>
        </template>
      </van-field>

     <van-field
        v-model="dataForm.birthday"
        is-link
        readonly
        name="datePicker"
        label="出生日期"
        placeholder="请选择出生日期"
        @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" position="bottom" :style="{ height: '40%' }">
        <ZhengDatePicker :currentDate="dataForm.birthday" @date-confirm-click="dateConfirmClick"></ZhengDatePicker>
      </van-popup>

      <van-field
        v-model="dataForm.createDate"
        name="入驻时间"
        label="入驻时间"
        readonly
      />

      <van-field name="账号状态" label="账号状态" readonly>
        <template #input>
          <van-tag v-if="dataForm.status===0" type="primary">正常</van-tag>
          <van-tag v-if="dataForm.status===1" type="danger">禁用</van-tag>
        </template>
      </van-field>
    </van-cell-group>

    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
  </div>
</template>

<script>
import { useRoute, useRouter } from "vue-router"
import { onBeforeMount, reactive, toRefs } from 'vue';
import http from "@/utils/http";
import { showSuccessToast, showFailToast } from 'vant'
import NavBar from "@/components/layout/nav-bar";
import ZhengDatePicker from "@/components/zheng-date-picker/zheng-date-picker";
export default {
  components: {
     NavBar,
     ZhengDatePicker,
  },

  setup(){
    const router = useRouter();
    const state = reactive({
      showPicker: false,
      dataForm: {
        id: '',
        username: '',
        avatar: '',
        nickname: '',
        idCard: '',
        birthday: '',
        gender: '',
        province: '',
        city: '',
        region: '',
        address: '',
        status: '',
        createDate: ''
      }
    })

    onBeforeMount(async () => {
      await http.get('/member/userInfo').then(({ data: res }) => {
        if (res.code !== 0) {
          return showFailToast(res.msg)
        }
        if(res.data.avatar ==null) {
          res.data.avatar = "https://img.yzcdn.cn/vant/cat.jpeg"
        }
        res.data.gender = res.data.gender +""
        state.dataForm = res.data
      })
    })

    const dateConfirmClick = (t) => {
      state.dataForm.birthday = t
      state.showPicker = false
    }

    const dataFormSubmitHandle = () => {
      http.post('/member/update', state.dataForm).then(({data : res}) =>{
       if (res.code !==0){
         return showFailToast(res.msg);
       }
       return router.back()
      })
    }

    return {
      dateConfirmClick,
      dataFormSubmitHandle,
      ...toRefs(state),
    }
  },
}
</script>

<style>
</style>
